<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情 - 宠物家政服务</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/order-detail.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="logo">
                <i class="fas fa-paw"></i>
                <span>宠物家政</span>
            </div>
            <nav class="nav">
                <a href="index.html" class="nav-link">首页</a>
                <a href="services.html" class="nav-link">服务预约</a>
                <a href="orders.html" class="nav-link active">我的订单</a>
                <a href="profile.html" class="nav-link">个人中心</a>
            </nav>
            <div class="user-actions">
                <a href="pets.html" class="nav-link">
                    <i class="fas fa-dog"></i> 我的宠物
                </a>
                <span class="user-name">张三</span>
            </div>
        </div>
    </header>

    <main class="main">
        <div class="container">
            <div class="page-header">
                <a href="orders.html" class="back-link">
                    <i class="fas fa-arrow-left"></i> 返回订单列表
                </a>
                <h1>订单详情</h1>
            </div>

            <!-- 订单状态时间轴 -->
            <div class="order-timeline" id="order-timeline">
                <!-- 由JS渲染 -->
            </div>

            <div class="detail-content" id="order-detail-content">
                <!-- 由JS渲染 -->
            </div>

            <!-- 底部操作按钮 -->
            <div class="detail-actions" id="detail-actions">
                <!-- 由JS渲染 -->
            </div>
        </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.0/dist/axios.min.js"></script>
    <script src="js/api.js"></script>
    <script>
        // 订单状态映射
        const ORDER_STATUS_MAP = {
            0: { text: '待付款', class: 'pending', timeline: '订单提交' },
            1: { text: '待服务', class: 'paid', timeline: '等待服务' },
            2: { text: '服务中', class: 'processing', timeline: '服务中' },
            3: { text: '已完成', class: 'completed', timeline: '服务完成' },
            4: { text: '已取消', class: 'cancelled', timeline: '已取消' }
        };

        document.addEventListener('DOMContentLoaded', async () => {
            const orderNo = getOrderNoFromUrl();
            if (!orderNo) {
                renderError('未获取到订单号');
                return;
            }
            await loadOrderDetail(orderNo);
        });

        // 获取订单号
        function getOrderNoFromUrl() {
            const params = new URLSearchParams(window.location.search);
            return params.get('id');
        }

        // 加载订单详情
        async function loadOrderDetail(orderNo) {
            const timeline = document.getElementById('order-timeline');
            const detailContent = document.getElementById('order-detail-content');
            const actions = document.getElementById('detail-actions');
            timeline.innerHTML = detailContent.innerHTML = actions.innerHTML = '<div style="text-align:center;padding:40px 0;">加载中...</div>';
            try {
                // 获取所有订单，找到对应订单（如有单独详情接口可替换）
                const response = await petHouseAPI.orders.getAll();
                const orders = response.data || [];
                const order = orders.find(o => o.orderNo === orderNo);
                if (!order) {
                    renderError('未找到该订单');
                    return;
                }
                renderTimeline(order);
                renderDetailContent(order);
                renderActions(order);
            } catch (error) {
                renderError('订单详情加载失败，请刷新重试');
                console.error('订单详情加载失败:', error);
            }
        }

        // 渲染时间轴
        function renderTimeline(order) {
            const timeline = document.getElementById('order-timeline');
            const status = order.status;
            const statusInfo = ORDER_STATUS_MAP[status] || { text: '未知', class: '', timeline: '未知' };
            // 简单时间轴，按实际业务可扩展
            let html = '';
            html += `<div class="timeline-item active">
                        <div class="timeline-icon"><i class="fas fa-file-invoice"></i></div>
                        <div class="timeline-content"><h3>订单提交</h3><p>${formatDate(order.createdAt)}</p></div>
                    </div>`;
            if (status >= 0) {
                html += `<div class="timeline-item${status >= 1 ? ' active' : ''}">
                            <div class="timeline-icon"><i class="fas fa-credit-card"></i></div>
                            <div class="timeline-content"><h3>支付完成</h3><p>${status >= 1 ? formatDate(order.createdAt) : '待支付'}</p></div>
                        </div>`;
            }
            if (status >= 1) {
                html += `<div class="timeline-item${status >= 2 ? ' active' : ''}${status === 1 ? ' current' : ''}">
                            <div class="timeline-icon"><i class="fas fa-user-clock"></i></div>
                            <div class="timeline-content"><h3>等待服务</h3><p>预约时间：${formatDate(order.serviceTime, true)}</p></div>
                        </div>`;
            }
            if (status >= 2) {
                html += `<div class="timeline-item${status >= 3 ? ' active' : ''}${status === 2 ? ' current' : ''}">
                            <div class="timeline-icon"><i class="fas fa-check-circle"></i></div>
                            <div class="timeline-content"><h3>服务完成</h3><p>${status >= 3 ? formatDate(order.updatedAt) : '待完成'}</p></div>
                        </div>`;
            }
            if (status === 4) {
                html += `<div class="timeline-item active current">
                            <div class="timeline-icon"><i class="fas fa-times-circle"></i></div>
                            <div class="timeline-content"><h3>已取消</h3><p>${formatDate(order.updatedAt)}</p></div>
                        </div>`;
            }
            timeline.innerHTML = html;
        }

        // 渲染详情内容
        function renderDetailContent(order) {
            const detailContent = document.getElementById('order-detail-content');
            detailContent.innerHTML = `
                <div class="detail-card">
                    <h2>基本信息</h2>
                    <div class="info-grid">
                        <div class="info-item"><label>订单编号</label><span>${order.orderNo}</span></div>
                        <div class="info-item"><label>下单时间</label><span>${formatDate(order.createdAt)}</span></div>
                        <div class="info-item"><label>订单状态</label><span class="order-status ${ORDER_STATUS_MAP[order.status]?.class}">${ORDER_STATUS_MAP[order.status]?.text || '未知'}</span></div>
                        <div class="info-item"><label>支付方式</label><span>--</span></div>
                    </div>
                </div>
                <div class="detail-card">
                    <h2>服务信息</h2>
                    <div class="service-info">
                        <div class="service-type">
                            <i class="fas fa-paw"></i>
                            <h3>${order.serviceName || '-'}</h3>
                        </div>
                        <div class="info-grid">
                            <div class="info-item"><label>服务时间</label><span>${formatDate(order.serviceTime, true)}</span></div>
                            <div class="info-item"><label>服务宠物</label><span>${order.petName || '-'}</span></div>
                            <div class="info-item"><label>服务地址</label><span>${order.address || '-'}</span></div>
                            <div class="info-item"><label>备注信息</label><span>${order.remark || '-'}</span></div>
                        </div>
                    </div>
                </div>
                <div class="detail-card">
                    <h2>服务人员</h2>
                    <div class="staff-info">
                        <div class="staff-avatar">
                            <img src="images/staff1.jpg" alt="${order.staffName || '服务人员'}">
                            <span class="staff-badge">金牌服务</span>
                        </div>
                        <div class="staff-details">
                            <h3>${order.staffName || '-'}</h3>
                            <p><i class="fas fa-star"></i> -- | 服务--次</p>
                            <p><i class="fas fa-certificate"></i> --</p>
                            <p><i class="fas fa-phone"></i> --</p>
                        </div>
                        <button class="btn btn-primary" onclick="contactStaff()">
                            <i class="fas fa-comment"></i> 联系服务人员
                        </button>
                    </div>
                </div>
                <div class="detail-card">
                    <h2>费用信息</h2>
                    <div class="price-details">
                        <div class="price-item"><span>服务费用</span><span class="price">¥${order.totalAmount != null ? order.totalAmount.toFixed(2) : '--'}</span></div>
                        <div class="price-item"><span>上门费用</span><span class="price">--</span></div>
                        <div class="price-item discount"><span>优惠券</span><span class="price">--</span></div>
                        <div class="price-item total"><span>实付金额</span><span class="price">¥${order.totalAmount != null ? order.totalAmount.toFixed(2) : '--'}</span></div>
                    </div>
                </div>
            `;
        }

        // 渲染底部操作按钮
        function renderActions(order) {
            const actions = document.getElementById('detail-actions');
            let html = '';
            if (order.status === 0) {
                html += `<button class="btn btn-outline" onclick="cancelOrder()">取消订单</button>
                         <button class="btn btn-primary" onclick="payOrder()">立即付款</button>`;
            } else if (order.status === 1 || order.status === 2) {
                html += `<button class="btn btn-outline" onclick="cancelOrder()">取消订单</button>
                         <button class="btn btn-primary" onclick="contactService()">联系客服</button>`;
            } else if (order.status === 3) {
                html += `<button class="btn btn-primary" onclick="writeReview()">评价服务</button>
                         <button class="btn btn-outline" onclick="bookAgain()">再次预约</button>`;
            }
            actions.innerHTML = html;
        }

        // 错误渲染
        function renderError(msg) {
            document.getElementById('order-timeline').innerHTML = '';
            document.getElementById('order-detail-content').innerHTML = `<div style='color:#ef4444;text-align:center;padding:40px 0;'>${msg}</div>`;
            document.getElementById('detail-actions').innerHTML = '';
        }

        // 时间格式化
        function formatDate(dateStr, onlyDate = false) {
            if (!dateStr) return '-';
            const d = new Date(dateStr);
            if (isNaN(d.getTime())) return dateStr;
            const y = d.getFullYear();
            const m = (d.getMonth() + 1).toString().padStart(2, '0');
            const day = d.getDate().toString().padStart(2, '0');
            const h = d.getHours().toString().padStart(2, '0');
            const min = d.getMinutes().toString().padStart(2, '0');
            if (onlyDate) return `${y}-${m}-${day}`;
            return `${y}-${m}-${day} ${h}:${min}`;
        }

        // 操作函数（可完善）
        function contactStaff() { console.log('联系服务人员'); }
        function cancelOrder() { if (confirm('确定要取消这个订单吗？')) { console.log('取消订单'); } }
        function contactService() { console.log('联系客服'); }
        function payOrder() { console.log('立即付款'); }
        function writeReview() { console.log('评价服务'); }
        function bookAgain() { console.log('再次预约'); }
    </script>
</body>
</html> 